import React,{useEffect, useState} from 'react';
import { Select,Input,Table,Radio,Tag,Modal,message} from 'antd';
import {getMngTeam} from '../../api/zheng/index'
import { useNavigate } from 'react-router-dom'
import '../../styles/zheng/JoinTeam.scss'
import { ExclamationCircleFilled } from '@ant-design/icons'
import {getMngtable,patchMngtable} from '../../api/zheng/index.js'
interface Props {

}
 
const { Search } = Input;
const { confirm } = Modal;
function JoinTeam(props: Props) {
    var navigate = useNavigate()
    var [truelist,setTruelist] = useState([])
    var [list,setList] = useState([])
    var [loading, setLoading] = useState(false)
    var [pagination, setPagination] = useState({ current: 1, pageSize: 5, total: 100 })
    const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>('checkbox');
    const [messageApi, contextHolder] = message.useMessage()
    var [options,setOptions] = useState([])

    // 挂载期
    useEffect(()=>{
        getMngTeam().then(res=>{
            var arr =res.data.map((item:any)=>{
                return {value:item.id,label:item.name}
            })
            setOptions(arr)
        })
        getMngtable().then(res=>{
            var arr = res.data.filter((item:any)=>{
                return item.isjoin
            })
            setList(arr)
            setPagination({
                ...pagination, total: res.data.length
            })
        })
    },[])

    // 点击搜索的时候
    const onSearch = (value:string)=>{
        getMngtable().then(res=>{
           var arr = res.data.filter((item:any)=>{
            return item.teamname.indexOf(value)!= -1
           })
           setList(arr)
        })
    }
 // 分页发生改变后执行
 const handleChange = (pagi:any) =>{
    setPagination(pagi) //更新页码
    setLoading(true)
    // 请求新的页码对应的数据
    getMngtable().then(res=>{
        console.log(res);
        setLoading(false)
        setPagination({
            ...pagi,total:res.data.length
        })
    })
}
      // 多选
      const rowSelection = {
        onChange: (selectedRowKeys:any, selectedRows:any)=> {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
          setTruelist(selectedRowKeys)
        }
      }
    // 点击删除
    const showConfirm = (id: any) => {
        confirm({
            title: '解散确认',
            icon: <ExclamationCircleFilled />,
            content: '确定解散此团队吗?',
            okText: "确认",
            cancelText: "取消",
            onOk() {
                getMngtable().then(res=>{
                    var arr= res.data.find((item:any)=>{
                      return item.id==id
                    })
                    patchMngtable({...arr,isjoin:false}).then(res=>{
                        messageApi.open({
                            type: 'success',
                            content: '解散成功',
                          });
                          setTimeout(()=>{
                            navigate(0)
                          },1000)
                    })
                  })
            },
            onCancel() {
                console.log('已取消');

            },
        });
    }
      // 表格
    const columns = [
        {
            title: '编号', //表格头的标题
            dataIndex: 'id', //数据索引，决定通过哪个属性名（字段名）获取数据
            key: 'id', 
        },
        {
            title: '头像',
            dataIndex: 'avatar',
            key: 'avatar',
            render:(_:any,record:any)=>{
                return (
                    <img src={record.avatar} />
                )
            }
        },
        {
            title: '团队名称',
            dataIndex: 'teamname',
            key: 'teamname',
        },
        {
            title: '团队长',
            dataIndex: 'leader',
            key: 'leader',
        },
        {
            title: '团队标签',
            dataIndex: 'tags',
            key: 'tags',
            render: (_: any, record: any) => (
                <Tag color={record.tags === "冠心病" ? 'geekblue' : 'orange'} style={{ borderRadius: '20px', border: 'none' }}> {record.tags} </Tag>
            ),
        },
        {
            title: '所属机构',
            dataIndex: 'oforg',
            key: 'oforg',
        },
        {
            title: '签约人数',
            dataIndex: 'signnum',
            key: 'signnum',
        },
        {
            title: '评分',
            dataIndex: 'score',
            key: 'score',
        },
        {
            title: '状态',
            dataIndex: 'states',
            key: 'states',
            render:(states:string)=> <span style={{color:states?"#21e121":"#ccc",fontSize :'12px'}}>{states?'启用中':'未启用'} </span>
        },
        {
            title: '操作',
            dataIndex: 'handle',
            key: 'handle',
            render:(_:any,record:any)=>{ //动态渲染当前列的数据，和dataIndex有冲突
               return(
                <>
                   <a className='pen' >查看详情</a>
                   <a className='delete' onClick={(id) => { showConfirm(record.id) }}>解散退队</a>
                </>
               )
            }
        },
    ]
    return (
        <div className='jointeam'>
            <div className="select">
                <span className='about'>所属机构</span>
                <div className="sleft">
                    <Select
                        defaultValue="请选择"
                        style={{ width: 200 }}
                        options={options}
                    />
                </div>
                 <Search placeholder="请输入关键字" onSearch={onSearch} style={{ width: 300 }} />
            </div>
            <Radio.Group
                    onChange={({ target: { value } }) => {
                        setSelectionType(value);
                    }}
                    value={selectionType}
                >
                </Radio.Group>
            <Table 
             rowSelection={{
                type: selectionType,
                ...rowSelection,
            }}
            pagination={pagination}
            onChange={(pagi) => { handleChange(pagi) }}
            loading={loading}
            dataSource={list}
            columns={columns} />
        </div>
    );
}

export default JoinTeam;